<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo11</title>
  <script src="js/vue.js"></script>
  <style>
    .one {
      color: red;
    }

    .two {
      color: green;
    }

    .three {
      color: orange;
    }
  </style>
</head>

<body>
<div id="app"></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'jspang.com',
      }
    },
    methods: {
      handleItemClick() {
        if (this.message == 'jspang.com')
          this.message = '技术胖'
       else if (this.message == '技术胖')
          this.message = 'bilibili'
       else if (this.message == 'bilibili')
          this.message = 'jspang.com'
      }
    },
    template: `<h2 @click="handleItemClick" v-if="message=='jspang.com'" class="one" > {{message}} </h2>
<h2 @click="handleItemClick" v-if="message=='技术胖'" class="two"> {{message}} </h2>
<h2 @click="handleItemClick" v-if="message=='bilibili'"  class="three"> {{message}} </h2>`

  })
  const vm = app.mount("#app")
</script>
</html>
